<template>
	<view class="container">
		<!-- 酒店详情 -->
		<view class="hotel-detail">
			<view class="detail-header">
				<swiper class="detail-swiper" autoplay circular>
					<swiper-item>
						<image :src="info.picture"
							mode="aspectFill" class="detail-banner" />
					</swiper-item>
				</swiper>
				<view class="detail-info">
					<text class="detail-name">{{info.name}}</text>
					<view class="detail-location">
						<text class="location-text">{{info.bedInfo}}</text>
					</view>
				</view>
			</view>
			<view class="detail-section">
				<text class="section-title">房间设施</text>
				<view class="facility-list">
					<view class="facility-item" v-if="info.hasWifi">
						<image src="@/static/images/wifi.png" class="facility-icon"></image>
						<text>免费Wi-Fi</text>
					</view>
					<view class="facility-item" v-if="info.hasWindow">
						<image src="@/static/images/window.png" class="facility-icon"></image>
						<text>窗口</text>
					</view>
					<view class="facility-item" v-if="info.hasBreakfast">
						<image src="@/static/images/breakfast.png" class="facility-icon"></image>
						<text>早餐</text>
					</view>
				</view>
			</view>
			<view class="detail-section">
				<text class="section-title">房型详情</text>
				<view class="room-info">
					<text class="info-item">房间面积：{{info.roomSize}}</text>
					<text class="info-item">楼层：{{info.floorInfo}}</text>
					<text class="info-item">可住：{{info.occupancy}}人</text>
				</view>
			</view>
			<view class="detail-section">
				<text class="section-title">酒店政策</text>
				<view class="policy-list">
					<uv-parse :content="info.facilitPolicy"></uv-parse>
				</view>
			</view>
			<view class="bottom-bar">
				<view class="price-info">
					<text class="price-label">价格</text>
					<text class="price-value">¥{{info.price.toFixed(2)}}</text>
				</view>
				<button class="reserve-btn" @click="openReservation">去预约</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		BASE_URL_ZJ
	} from '@/api/config';

	export default {
		data() {
			return {
				info: {},
				start: '',
				end: ''
			}
		},

		onLoad(options) {
			this.getDetail(options.id);
			this.start = options.start;
			this.end = options.end;
		},

		methods: {
			getDetail(id) {
				uni.request({
					url: BASE_URL_ZJ + '/roomType/byId/' + id,
					method: 'GET',
					success: res => {
						this.info = res.data.data;
					}
				})
			},

			openReservation() {
				uni.navigateTo({
					url: `/pages/hotel/reservation?id=${this.info.id}&start=${this.start}&end=${this.end}`
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding-bottom: 120rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.person-icon {
		width: 24px;
		height: 24px;
	}

	.search-area {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		padding: 16rpx 20rpx;
		border-radius: 8px;
	}

	.search-icon {
		width: 20px;
		height: 20px;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 14px;
		color: #333333;
	}

	.filter-scroll {
		margin-top: 20rpx;
		white-space: nowrap;
		overflow: auto;
	}

	.filter-list {
		display: inline-flex;
		padding: 10rpx 0;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		background-color: #f8f8f8;
		border-radius: 20px;
	}

	.filter-icon {
		width: 16px;
		height: 16px;
		margin-right: 8rpx;
	}

	.filter-item text {
		font-size: 14px;
		color: #666666;
	}

	.recommend-section {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-text {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.more-text {
		font-size: 14px;
		color: #999999;
	}

	.recommend-scroll {
		overflow: auto;
	}

	.recommend-list {
		display: inline-flex;
		padding: 10rpx 0;
	}

	.recommend-item {
		width: 300rpx;
		margin-right: 20rpx;
		border-radius: 12px;
		overflow: hidden;
		background-color: #ffffff;
	}

	.recommend-image {
		width: 300rpx;
		height: 200rpx;
		border-radius: 12px 12px 0 0;
	}

	.recommend-info {
		padding: 20rpx;
	}

	.hotel-name {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rating-box {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.rating {
		font-size: 14px;
		color: #ff6b6b;
		margin-right: 8rpx;
	}

	.comment-count {
		font-size: 12px;
		color: #999999;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.tag {
		font-size: 12px;
		color: #666666;
		background-color: #f8f8f8;
		padding: 4rpx 12rpx;
		border-radius: 4px;
		margin-right: 8rpx;
		margin-bottom: 8rpx;
	}

	.price {
		font-size: 16px;
		color: #ff6b6b;
		font-weight: 500;
	}

	.hotel-detail {
		flex: 1;
		background-color: #ffffff;
	}

	.detail-header {
		position: relative;
		width: 100%;
	}

	.detail-swiper {
		width: 750rpx;
		height: 500rpx;
	}

	.detail-banner {
		width: 750rpx;
		height: 500rpx;
		object-fit: cover;
	}

	.detail-info {
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 32px 32px 0 0;
		margin-top: -60rpx;
		position: relative;
		z-index: 1;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
	}

	.detail-name {
		font-size: 20px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.detail-rating {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.detail-location {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.location-icon {
		width: 14px;
		height: 14px;
		margin-right: 8rpx;
	}

	.location-text {
		font-size: 14px;
		color: #666666;
	}

	.detail-section {
		padding: 40rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.facility-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -20rpx;
	}

	.facility-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.facility-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 12rpx;
		color: #666666;
	}

	.facility-item text {
		font-size: 14px;
		color: #666666;
		text-align: center;
	}

	.room-info {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -20rpx;
	}

	.info-item {
		width: 50%;
		font-size: 14px;
		color: #666666;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.policy-list {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 16px;
	}

	.policy-item {
		margin-bottom: 20rpx;
	}

	.policy-item:last-child {
		margin-bottom: 0;
	}

	.policy-time {
		display: block;
		font-size: 14px;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.policy-text {
		display: block;
		font-size: 14px;
		color: #666666;
		line-height: 1.6;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.price-info {
		display: flex;
		align-items: baseline;
		margin-right: 30rpx;
	}

	.price-label {
		font-size: 14px;
		color: #666666;
		margin-right: 8rpx;
	}

	.price-value {
		font-size: 24px;
		font-weight: 600;
		color: #ff6b6b;
	}

	.price-unit {
		font-size: 14px;
		color: #999999;
		margin-left: 4rpx;
	}

	.reserve-btn {
		padding: 20rpx 60rpx;
		background-color: #ff6b6b;
		color: #ffffff;
		font-size: 16px;
		font-weight: 500;
		border-radius: 25px;
		margin: 0;
	}
</style>